<script setup>
import { useRouter } from 'vue-router';
import { ref } from 'vue';
import SearchBar from '/src/components/SearchBar.vue'
import Pagination from '/src/components/Pagination_lxw.vue'
import Cookie from 'js-cookie';

const router = useRouter();



// go to create Team View
function goTo(name) {
    router.push({name})
}

// SubjectCard's function
// button's text 是 i18n里的内容
const buttons = [
    {
        text: 'team_hall.subjectCard.operation.apply',
        func: () => {}
    },
    {
        text: 'team_hall.subjectCard.operation.detail',
        func: getSubjectDetail
    }
]

function getSubjectDetail({team_id}) {
    router.push({name: 'team_detail', params:{team_id}})

}

// 获取团队列表
const cookie = Cookie.get('userData')
const userData = cookie == undefined ? null : JSON.parse(cookie)
const teams = ref([])
if (userData != null) {
    const hall_request = new Request('http://api.linwine.space/api/sjk/team/hall', {
        method: 'GET',
        headers: new Headers({
            'Content-Type': 'application/json',
            'Token': userData['Token']
        })
    })
    fetch(hall_request)
        .then((response) => response.json())
        .then((res) => {
            if(res.code == 200) {
                teams.value = res.data.team
            }
            else {
                alert(res.msg)
            }
        })
}


</script>
<template>
   <div class="team-hall" >
        <div class="team-hall-header" >
            <div class="title" >
                <p>{{$t('team_hall.title')}}</p>
            </div>
            <SearchBar :placeholder="$t('team_hall.searchBar.placeholder')" />
        </div>
        <div class="team-hall-main" >
            <div class="create-card" style="margin: 14px 14px;" @click="goTo('create_team')" >
                {{$t('team_hall.createCard')}}
            </div>
            <SubjectCard v-for="(item, index) in teams" :key="index" style="margin: 14px 14px;" 
            :itemName="item['teamName']" :itemIntroduction="item['introduction']" :itemId="item['teamId']" :buttons="buttons" :params="[{}, {team_id: item['teamId']}]" />
            <!-- <SubjectCard :itemName="'团队名称'"  :itemIntroduction="'团队简介'"  :itemId="1" :buttons="buttons" :params="[{}, {team_id: 1}]" style="margin: 14px 14px;" />
            <SubjectCard :itemName="'团队名称'"  :itemIntroduction="'团队简介'"  :itemId="2" :buttons="buttons" :params="[{}, {team_id: 2}]" style="margin: 14px 14px;" />
            <SubjectCard :itemName="'团队名称'"  :itemIntroduction="'团队简介'"  :itemId="3" :buttons="buttons" :params="[{}, {team_id: 3}]" style="margin: 14px 14px;" />
            <SubjectCard :itemName="'团队名称'"  :itemIntroduction="'团队简介'"  :itemId="4" :buttons="buttons" :params="[{}, {team_id: 4}]" style="margin: 14px 14px;" />
            <SubjectCard :itemName="'团队名称'"  :itemIntroduction="'团队简介'"  :itemId="5" :buttons="buttons" :params="[{}, {team_id: 5}]" style="margin: 14px 14px;" />
            <SubjectCard :itemName="'团队名称'"  :itemIntroduction="'团队简介'"  :itemId="6" :buttons="buttons" :params="[{}, {team_id: 6}]" style="margin: 14px 14px;" />
            <SubjectCard :itemName="'团队名称'"  :itemIntroduction="'团队简介'"  :itemId="7" :buttons="buttons" :params="[{}, {team_id: 7}]" style="margin: 14px 14px;" /> -->
        </div>
        <div class="team-hall-pagination" >
            <Pagination :total="teams.length" />
        </div>
   </div>


</template>

<style scoped>

.team-hall {
    display: flex; 
    justify-content: center; 
    align-items: center; 
    flex-wrap: wrap; 
    width: 100%;
    padding: 0px 89px;
}
.team-hall .team-hall-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 20px 14px;
    flex-wrap: wrap; 
}

.team-hall .team-hall-header .title p {
    font-family: Source Han Sans CN;
	font-size: 30px;
    font-weight: bold;
    color: #707070;
    margin: 10px 0px;
}

.team-hall .team-hall-main {
    display: flex;
    align-items: center;
    flex-wrap: wrap;  
    width: 100%;
}

.team-hall .team-hall-main .create-card {
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 2px 3px 6px 0px rgba(0, 0, 0, 0.16);
    width: 290px;
    height: 151px;
    border-radius: 10px;
    background:  #ffffff;
    font-family: Source Han Sans CN;
	font-size: 18px;
	color: #707070;
    cursor: pointer;
    user-select: none;
}

.team-hall .team-hall-main .create-card::before {
    content: "+";

}

.team-hall .team-hall-main .create-card:active {
    transform: translateY(3px);
}

.team-hall .team-hall-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 20px 0px;
}


</style>